<div class="container_16 containerHeight">
    <div class="grid_12 push_1">
        <h2><?=lang('buscarMovimiento');?></h2>
        <fieldset style="border-color: red">
            <legend><h2><?=lang('filtros');?></h2></legend>
            <table>
                <tr>
                    <td><?=lang('descripcion');?>:</td>
                    <td><input id="txtDescripcion" type="text"/></td>
                    <td><?=lang('fecha');?>:</td>
                    <td><input id="fechaIni" size="7" type="text"/></td>
                    <td> <?=lang('a');?> </td>
                    <td><input id="fechaFin" size="7" type="text"/></td>
                    <td><?=lang('concepto');?>:</td>
                    <td><input id="txtConcepto" type="text"/></td>
                    <td colspan="8" style="text-align: right"><button type="button" id="btnLimpiar"><?=lang('limpiarFiltros');?></button> </td>
                </tr>
            </table>
        </fieldset>
        <br>
        <table id="movimientos">
            <thead>
            <tr>
                <th><?=lang('descripcion');?></th>
                <th><?=lang('fecha');?></th>
                <th><?=lang('concepto');?></th>
                <th><?=lang('importe');?></th>
                <th><?=lang('saldo');?></th>
            </tr>
            </thead>
            <tbody>
            <?php foreach ($movimientos as $m): ?>
            <tr>
                <td><?=$m->descripcion?></td>
                <td><?=$m->fecha?></td>
                <td><?=$m->concepto?></td>
                <td><?=$m->importe?></td>
                <td><?=$m->resto?></td>
            </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
    $(document).ready(function () {
        /*date picker fecha*/
        $("#fechaIni").datepicker({
            dateFormat:"dd-mm-yy",
            changeMonth:true,
            changeYear:true,
            onSelect: function(dateText, inst) {
                $("#fechaIni").change();
                $("#fechaFin").change();
            }
        });

        $("#fechaFin").datepicker({
            dateFormat:"dd-mm-yy",
            changeMonth:true,
            changeYear:true,
            onSelect: function(dateText, inst) {
                $("#fechaIni").change();
                $("#fechaFin").change();
            }
        });

        $(document).ready(function() {
            /*DATA TABLE*/
            var oTable = $('#movimientos').dataTable({
                "bJQueryUI":true,
                "bInfo":false,
                "bSort":false,
                "bLengthChange":false,
                "oLanguage":{
                    "sUrl":"<?= lang('datatables_lng') ?>"
                }
            });

            /*DESCRIPCION*/
            $('#txtDescripcion').keyup(
                function() {
                    oTable.fnFilter(this.value, 0 );
                }
            );

            /*CONCEPTO*/
            $('#txtConcepto').keyup(
                function() {
                    oTable.fnFilter(this.value, 2 );
                }
            );

            /*RANGO FECHAS*/
            $('#fechaIni').change( function() { oTable.fnDraw();} );
            $('#fechaFin').change( function() { oTable.fnDraw();} );

            /*LIMPIAR FILTROS*/
            $("#btnLimpiar").click(function() {
                $("#txtDescripcion").val("");
                $("#txtConcepto").val("");
                $("#fechaIni").val("");
                $("#fechaFin").val("");
                oTable.fnFilter( "", 0);
                oTable.fnFilter( "", 2);
                oTable.fnDraw();
            });
        });
    });

    /*FILTRAR RANGO FECHAS*/
    $.fn.dataTableExt.afnFiltering.push(
        function( oSettings, aData, iDataIndex ) {
            var iFini = document.getElementById('fechaIni').value;
            var iFfin = document.getElementById('fechaFin').value;
            var iStartDateCol = 1;
            var iEndDateCol = 1;

            iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2)
            iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2)

            var datofini=aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5)+ aData[iStartDateCol].substring(0,2);
            var datoffin=aData[iEndDateCol].substring(6,10) + aData[iEndDateCol].substring(3,5)+ aData[iEndDateCol].substring(0,2);

            if ( iFini == "" && iFfin == "" )
            {
                return true;
            }
            else if ( iFini <= datofini && iFfin == "")
            {
                return true;
            }
            else if ( iFfin >= datoffin && iFini == "")
            {
                return true;
            }
            else if (iFini <= datofini && iFfin >= datoffin)
            {
                return true;
            }
            return false;
        }
    );
</script>